
/* ---------- 展示导航栏显示隐藏二维码和购物车 ---------- */
/* function showQr(){
    $(".header-nav-app").hover(function (){
        $(".down-box").stop().slideDown();      // 向下隐藏
        $(".trl").css("display", "block");      // 箭头显示
    }, function () {
        $(".down-box").stop().slideUp();        // 向上隐藏
        $(".trl").css("display", "none");       // 箭头隐藏
    });
    $(".Shopping-Cart").hover(function (){
        $(".show-cart").stop().slideDown();
    }, function () {
        $(".show-cart").stop().slideUp();
    });
}
showQr(); */

/* ---------- 导航栏显示隐藏二维码 ---------- */
    const header_nav_app = document.querySelector('.header-nav-app');
    const trl = document.querySelector('.trl');
    const down_box = document.querySelector('.down-box');
    header_nav_app.addEventListener('mouseover', function () {
        trl.style.display = 'block';
        down_box.style.height = 148 + 'px';
        header_nav_app.addEventListener('mouseout', function() {
            trl.style.display = 'none';
            down_box.style.height = 0 + 'px';
        })
    })

/* ---------- 导航栏显示购物车 ---------- */
    const shoppingCart = document.querySelector(".Shopping-Cart");
    const show_cart = document.querySelector('.show-cart');
    shoppingCart.addEventListener('mouseover',function(){
        show_cart.style.height = 100 + 'px';
        shoppingCart.addEventListener('mouseout',function(){
            show_cart.style.height = '';
        })
    });

/* ---------- 搜索物品 ---------- */
function searchBox() {

    const search_text = document.querySelector(".search-text");
    const text_ul = document.querySelector(".text-list");
    const text_li = text_ul.children;       // 遍历li

    let act_index = 0;
    let move_index = 0;

    set_act(act_index);
    function set_act(index) {
        for (let k = 0; k < text_li.length; k++){
            text_li[k].className = "";
            text_li[k].id = "";
        }
        text_li[index].className = "search-act";
        text_li[index].id = "red";
    }

    search_text.onfocus = function () {
        text_ul.style.display = "block";
        
        for (let i = 0; i < text_li.length; i++) {
            text_li[i].num = i;

            text_li[i].onmouseover = function () {
                act_index = this.num;

                for (let j = 0; j < text_li.length; j++){
                    text_li[j].className = "";
                }
                this.className = "search-act";
            }

            text_li[i].onclick = function () {
                this.id = "red";
                search_text.value = this.innerHTML;
                move_index = this.num;
                text_ul.style.display = "none";
                
                location.href = "../html/Goods-List.html";
            }

            set_act(move_index);
            act_index = move_index;
        }
    }

    document.onmousedown = function (eve) {
        let e = eve || window.event;
        e.stopPropagation();
        let target = e.target || e.srcElement;
        if (target.parentNode !== text_ul && target !== search_text) {
            text_ul.style.display = "none";
        }
    }

    search_text.onblur = function () {
        if (!search_text.placeholder) {
            search_text.placeholder = "全部商品";
        }
    }

    search_text.onkeydown = function (eve) {
        let e = eve || window.event;
        let code = e.keyCode || e.which;

        if(code === 38){
            move_index = act_index;
            if(move_index === 0){
                move_index = 0;
                act_index = 0;
            }else{
                move_index--;
                act_index--;
            }
            set_act(move_index);
            search_text.value = text_li[act_index].innerHTML;
            text_li[act_index].className = "search-act";
            text_li[act_index].id = "red";

        }else if(code === 40){
            move_index = act_index;
            if(move_index === text_li.length - 1){
                move_index = text_li.length - 1;
                act_index = text_li.length - 1;
            }else{
                move_index++;
                act_index++;
            }
            set_act(act_index);
            search_text.value = text_li[move_index].innerHTML;
        }

        
        if (code === 13) {
            search_text.innerHTML = text_li[act_index].innerHTML;
            text_ul.style.display = "none";
            // location.href = "../html/Goods-List.html";
        }
    }
}
searchBox();

/* ---------- 显示隐藏商品列表图 ---------- */
    const nav_li = $(".nav-list .nav-item");
    const commodityWrap = $(".nav-commodity-wrap");
    const commodity_ul = $(".nav-commodity ul");
    
    nav_li.hover(function () {
        commodityWrap.stop().slideDown(300);
    }, function () {
        commodityWrap.stop().slideUp(300);
    });
    commodityWrap.hover(function () {
        $(this).stop().show();              // .nav-commodity-wrap
    }, function () {
        $(this).stop().slideUp(300);
    });
    nav_li.hover(function () {
    // 获得第一个元素的名称和索引
        const index = $(this).index();      // li.nav-item
        commodity_ul.eq(index).show().siblings().hide();
    });

/* ---------- 轮播图 ---------- */
// 获取元素
    const banner_container = document.querySelector(".banner-container");
    const banner_img = document.querySelectorAll(".banner-img li");
    const btn_circle = document.querySelectorAll(".btn-circle li");
    const btn_left = document.getElementById("btn-left");
    const btn_right = document.getElementById("btn-right");

// 图片索引
    let index = 0;
// 定时器
    let time = setInterval(move,3000);

    function move() {
        clear();
        index++;
        if (index >= banner_img.length) {
            index = 0;
        }
    // 设置指定图片显示
        banner_img[index].setAttribute('class', 'img-show');
        btn_circle[index].setAttribute('class', 'circle-select');
    }
    
    function clear() {
        for (let i = 0; i < banner_img.length; i++){
            banner_img[i].removeAttribute('class');
            btn_circle[i].removeAttribute('class');
        }
    }

// 给banner_container绑定事件
    // 鼠标移入暂停切换
    banner_container.onmouseover = function(){
        clearInterval(time);
    }
    // 鼠标移出开始图片切换
    banner_container.onmouseout = function(){
        time = setInterval(move, 3000);
    }

// 给小圆绑定点击事件
    for (let i = 0; i < btn_circle.length; i++){
        btn_circle[i].index = i;        // 圆点的索引 0~4
        btn_circle[i].onclick = function () {
            clear();
            index = this.index;
            banner_img[index].setAttribute('class', 'img-show');
            btn_circle[index].setAttribute('class', 'circle-select');
        }
    }

// 给左右按钮绑定点击事件
    btn_left.onclick = function () {
        clear();
        if (index === 0) {
            index = 4;
            banner_img[index].setAttribute('class', 'img-show');
            btn_circle[index].setAttribute('class', 'circle-select');
        } else {
            index--;
            banner_img[index].setAttribute('class', 'img-show');
            btn_circle[index].setAttribute('class', 'circle-select');
        }
    }
    btn_right.onclick = function () {
        clear();
        if (index === 4) {
            index = 0;
            banner_img[index].setAttribute('class', 'img-show');
            btn_circle[index].setAttribute('class', 'circle-select');
        } else {
            index++;
            banner_img[index].setAttribute('class', 'img-show');
            btn_circle[index].setAttribute('class', 'circle-select');
        }
    }
// })();

/* ---------- 二级菜单 ---------- */
// (function () {
    const menu_list_nav = document.querySelectorAll(".menu-list-nav li");
    const menu_list_item = document.querySelectorAll(".menu-list-item");
    
    for (let i = 0; i < menu_list_nav.length; i++){
        menu_list_nav[i].onmouseover = function () {
            // menu_list_item[i].style.display = "none";
            menu_list_item[i].style.display = "block";
        }
        menu_list_nav[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
        menu_list_item[i].onmouseover = function () {
            menu_list_item[i].style.display = "block";
        }
        menu_list_item[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
    }

/* ---------- 选项卡 ---------- */
    const tab_li = document.querySelectorAll(".tab-list li");
    const main_box_right = document.querySelectorAll(".Movie-audio .main-box-right");
    
    for (let i = 0; i < tab_li.length; i++){
        tab_li[i].index = i;
        tab_li[i].onmouseover = function () {
            let num = parseInt(this.index);
            for (let j = 0; j < tab_li.length; j++){
                tab_li[j].className = "";
                main_box_right[j].className = "main-box-right hide";
            }
            tab_li[num].className = "tab-active";
            main_box_right[num].className = "main-box-right show";
        }
    }

/* ---------- 显示隐藏二维码 ---------- */
    const wx = document.querySelector('.wx');
    const pvg = document.querySelector('#wx');
    wx.onmouseenter = function () {
        pvg.style.display = 'block';
    }
    wx.onmouseleave = function() {
        pvg.style.display = 'none';
    }

/* ---------- 回顶部 ----------*/
// function scrollTop() {
//     $(document).on('scroll',function () {
//         if ($(document).scrollTop() >= 930){
//             $(".floor-wrap .backtop").addClass("active");
//         } else {
//             $(".floor-wrap .backtop").removeClass("active");
//         }
//     });
//     $(".backtop").click(function () {
//         $("body,html").animate({
//             scrollTop: 0,
//         }, 0);
//         $(".backtop").removeClass("active");
//         return false;
//     })
// }
// scrollTop();


function scrollTop() {
    $(document).on('scroll',function () {
        if ($(document).scrollTop() >= 930){
            $(".floor-wrap .floor-last").show();
        } else {
            $(".floor-wrap .floor-last").hide();
        }
    });
    $(".floor-last").on('click',function () {
        $("html,body").animate({
            scrollTop:0,
        })
        $(".floor-last").removeClass("");
        return false;
    })
}
scrollTop();


/* ---------- 登录成功之后，存储登录成功的标志 --------- */
const login = document.querySelectorAll(".login")[0];
const welcome = document.querySelectorAll(".login-welcome")[0];
const wel_sign = welcome.querySelector("span");
const exit = document.querySelector(".exit");

if (localStorage.getItem("state") === "ok") {
    login.style.display = "none";
    welcome.style.display = "block";
    wel_sign.innerHTML = localStorage.getItem("user");
}
exit.addEventListener("click", function () {
    localStorage.setItem("state", "");
    login.style.display = "block";
    welcome.style.display = "none";
})

const shop = document.querySelectorAll(".shop")[0];
shop.addEventListener("click", function () {
    if (localStorage.getItem("state") !== "ok") {
        if (confirm("你还没登录，请先登录！")) {
            location.href = "../html/Login.html";
        }
        return false;
    }
})